import React, { PropTypes } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Card, Row, Col, Button, Icon, Table, Popconfirm, Modal, Form, Input, Spin} from 'antd';

import './less/studentManage.less';

const FormItem = Form.Item;

const data = [{
    key: 1,
    name: '院系名称一',
    className: '班级一',
    }, {
    key: 2,
    name: '院系名称二',
    className: '班级二',
    }, {
    key: 3,
    name: '院系名称三',
    className: '班级三',
}];

var studentData = [];

class StudentManage extends React.Component{
  constructor(props) {
    super(props);

    this.state = {
      dataSource: [],
      studentDataSource: [],
      modalVisible: false,
      loading: false,
      rowData: {},
      selectedRowKeys: [1],
      classKey: 4
    };
  }

  _addClass() {
    let dataSource = [...this.state.dataSource];
    dataSource.push({
      key: this.state.classKey,
      name: '院系名称',
      className: '班级名称',
    });
    this.setState({
      dataSource,
      classKey: this.state.classKey + 1
    });
  }

  _showModal(record) {
    if(record) {
      this.setState({
        rowData: record
      });
    } else {
      this.setState({
        rowData: {}
      });
    }

    this.setState({
      modalVisible: true
    });
  }

  _hideModal() {
    this.setState({
      modalVisible: false
    });
  }

  _handleSubmit() {
    this.props.form.validateFieldsAndScroll((errors, values) => {
      if(errors) return;
      this.setState({
        loading: true
      });
      console.log(values);
    });
  }

  _tableChange(pagination, filters, sorter) {
    console.log(pagination);
  }

  _changeClass(n) {
    studentData = [];
    for(let i = 0; i < 20; i++) {
      studentData.push({key: i, name: `${n}学生姓名${i + 1}`, no: i < 10 ? `100${i}` : `10${i}`, phone: `${n}5288318101`,score: i});
    }
    this.setState({
      studentDataSource: [...studentData]
    })
  }

  componentDidMount(){
    this._changeClass(1);
    this.setState({
      dataSource: [...data]
    })
  }

  _renderModal() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 }
    };

    return(
      <Modal
        visible={this.state.modalVisible}
        title="编辑学员"
        onCancel={() => this._hideModal()}
        maskClosable={false}
        footer={[
          <Button key='submit' type="primary" size='large' loading={this.state.loading} onClick={() => this._handleSubmit()}>确定</Button>,
          <Button key='back' type="ghost" size='large' onClick={() => this._hideModal()}>取消</Button>
        ]} >
        <Form horizontal>
          <FormItem {...formItemLayout} label="姓名" hasFeedback>
            {getFieldDecorator('name', {
              rules: [{required: true, message: '请填写姓名'}],
              initialValue: this.state.rowData.name
            })(
              <Input type='text' placeholder="请输入姓名"/>
            )}
          </FormItem>
          <FormItem {...formItemLayout} label="学号" hasFeedback>
            {getFieldDecorator('no', {
              rules: [{required: true, message: '请填写学号'}],
              initialValue: this.state.rowData.no
            })(
              <Input type='number' placeholder="请输入学号"/>
            )}
          </FormItem>
          <FormItem {...formItemLayout} label="联系方式" >
            {getFieldDecorator('phone', {
              initialValue: this.state.rowData.phone
            })(
              <Input type='number' placeholder="请输入手机号"/>
            )}
          </FormItem>
          <FormItem {...formItemLayout} label="考试成绩" >
            {getFieldDecorator('score', {
              initialValue: this.state.rowData.score
            })(
              <Input type='number' placeholder="请输入成绩"/>
            )}
          </FormItem>
        </Form>
      </Modal>
    );
  }

  render() {
    const columns = [{
      title: '院系',
      dataIndex: 'name'
    }, {
      title: '班级',
      dataIndex: 'className',
    }];

    const studentColumns = [{
      title: '学号',
      dataIndex: 'no'
    }, {
      title: '姓名',
      dataIndex: 'name'
    }, {
      title: '联系方式',
      dataIndex: 'phone'
    }, {
      title: '成绩',
      dataIndex: 'score'
    }, {
      title: '操作',
      render: (text, record, index) => (
        <div>
          <a href="javascript:;" className='edit' onClick={() => this._showModal(record)}>编辑</a>
          <Popconfirm title="确定要删除这条信息吗？" onConfirm={() => {}} >
            <a href="javascript:;" className='delete'>删除</a>
          </Popconfirm>
        </div>
      )
    }];

    const pagination = {
      showSizeChanger: true,
      showQuickJumper: true
    };

    const rowSelection = {
      type: "radio",
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        this.setState({
          selectedRowKeys: selectedRowKeys
        });
        this._changeClass(selectedRowKeys);
      }
    };

    return(
      <Row>
        <Col span={6} className="classManage">
          <Card title="班级管理">
            <Button type="ghost" onClick={() => this._addClass()} icon='plus'>添加班级</Button>
            <Table
              bordered={true}
              pagination={false}
              dataSource={this.state.dataSource}
              columns={columns}
              rowSelection={rowSelection}
              className='marginT10'/>
          </Card>
        </Col>
        <Col span={18} className="studentManage">
          <Card title="学员管理">
            <Button type="ghost"  onClick={() => this._showModal()} icon='plus'>添加学员</Button>
            <Table
              bordered={true}
              dataSource={this.state.studentDataSource}
              columns={studentColumns}
              className='marginT10'
              pagination={pagination}
              onChange={this._tableChange.bind(this)} />
          </Card>
        </Col>
        {this._renderModal()}
      </Row>
    );
  }
}

StudentManage = Form.create({})(StudentManage);

export default StudentManage;
